import React,{useState,useEffect} from 'react'
import Danmu from './component/Danmu'
import './styles/tan.css'
import { useNavigate } from 'react-router-dom'
import { RightOutlined } from '@ant-design/icons';
import axios from 'axios'


const Tan=()=>{
    const [list]=useState(JSON.parse(localStorage.getItem('list')) ||{})
    const navigate=useNavigate()
    // console.log(list)
    const messages = [
        '环境很好，离地狱之谷很近',
        '自助餐一般',
        '总的来说很舒服',
        '楼顶温泉很棒哦',
    ];
    const [shops,setshops]=useState([])
    const getlist=async()=>{
        const {data:{data}}=await axios.get('http://127.0.0.1:3333/wshop')
        setshops(data)
    }
    const [dates, setDates] = useState({ startDate: null, endDate: null });
    useEffect(()=>{
        getlist()
            const savedDates = localStorage.getItem('selectedDates');
            if (savedDates) {
              setDates(JSON.parse(savedDates));
            }
    },[])
    const yu=()=>{
        navigate('/addwsy')
    }
    return (
        <div >
            <Danmu messages={messages} />
            <div  style={{background:'rgb(242, 238, 238)'}}>
            <div className="top"  onClick={()=>navigate('/yzfmap')} >
                <div className="tu" >
                    <div className="tu1"></div>
                    <div className="tu2">
                        <p>{list.dis}</p>
                        <p>推荐入住</p>
                        <p>条评论</p>
                    </div>
                </div>
<div className="dian">
    <div className="di">
        <span>{list.name}</span>
        <span onClick={()=>navigate('/xiang')}>详情 <RightOutlined /></span>
    </div>
    <div className="an">
        <div className="an1">
            <p><svg t="1740447294098" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24729" width="200" height="200"><path d="M512 938.666667C276.352 938.666667 85.333333 747.648 85.333333 512S276.352 85.333333 512 85.333333s426.666667 191.018667 426.666667 426.666667-191.018667 426.666667-426.666667 426.666667z m0-42.666667c212.074667 0 384-171.925333 384-384S724.074667 128 512 128 128 299.925333 128 512s171.925333 384 384 384z m-85.333333-277.333333v106.730666c0 11.733333-9.472 21.269333-21.333334 21.269334-11.776 0-21.333333-9.664-21.333333-21.269334V341.482667c0-11.861333 9.6-21.482667 21.482667-21.482667H533.333333c82.474667 0 149.333333 67.029333 149.333334 149.333333 0 82.474667-67.029333 149.333333-149.333334 149.333334h-106.666666z m0-42.666667h106.666666c58.816 0 106.666667-47.829333 106.666667-106.666667 0-58.816-47.829333-106.666667-106.666667-106.666666h-106.666666v213.333333z" fill="#3D3D3D" p-id="24730"></path></svg></p>
            <p style={{amarginLeft:'7rem'}}>停车场</p>
        </div>
        <div className="an1">
        <p><svg t="1740446951361" class="icon" viewBox="0 0 1195 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19429" width="200" height="200"><path d="M577.918 874.549c-197.754 0-362.549-164.795-362.549-362.549s164.795-362.549 362.549-362.549 362.549 164.795 362.549 362.549c0 197.754-164.795 362.549-362.549 362.549zM577.918 182.41c-181.274 0-329.59 148.315-329.59 329.59s148.315 329.59 329.59 329.59 329.59-148.315 329.59-329.59c0-181.274-148.315-329.59-329.59-329.59z" p-id="19430"></path><path d="M840 436c-4 0-12 0-16-4-60-60-144-96-232-96s-168 32-232 92c-8 8-20 8-28 0s-8-20 0-28c68-68 160-108 260-108s192 40 260 108c8 8 8 20 0 28-4 4-8 8-12 8z" p-id="19431"></path><path d="M748 524c-4 0-12 0-16-4-36-36-88-60-140-60s-104 20-140 60c-8 8-20 8-28 0s-8-20 0-28c44-44 104-68 168-68s124 24 168 68c8 8 8 20 0 28-4 4-8 4-12 4z" p-id="19432"></path><path d="M516 604c-4 0-12 0-16-4-8-8-8-20 0-28 48-48 132-48 184 0 8 8 8 20 0 28s-20 8-28 0c-32-32-92-32-124 0-8 0-12 4-16 4z" p-id="19433"></path><path d="M592 708c-24 0-48-20-48-48s20-48 48-48 48 20 48 48-24 48-48 48zM592 652c-4 0-8 4-8 8 0 8 12 8 12 0 4-4 0-8-4-8z" p-id="19434"></path></svg></p>
        <p>wifi</p>
        </div>
        <div className="an1">
            <p><svg t="1740447425104" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4409" width="200" height="200"><path d="M520.92 105.65c-19.57 0-35.42 15.85-35.42 35.42v205.24c0 68.81-47.59 126.55-111.53 142.46V102.63c0-19.56-15.86-35.42-35.42-35.42-19.56 0-35.42 15.86-35.42 35.42v386.15c-63.95-15.92-111.53-73.66-111.53-142.46V141.07c0-19.57-15.85-35.42-35.42-35.42s-35.42 15.85-35.42 35.42v205.24c0 108 79.11 197.65 182.38 214.66V921.7c0 19.56 15.86 35.42 35.42 35.42 19.56 0 35.42-15.86 35.42-35.42V560.97c103.27-17 182.37-106.65 182.37-214.66V141.07c-0.01-19.56-15.86-35.42-35.43-35.42zM864.54 70.99c-80.17 7.96-231.8 70.82-231.8 251.84 0 86.43 5.97 248.56 6.23 255.42l1.29 34.66 192.36-3.1v311.72c0 19.57 15.85 35.42 35.42 35.42s35.42-15.85 35.42-35.42V67.13l-38.92 3.86z m-31.93 467.96l-124.06 2.01c-1.8-53.62-4.97-156.83-4.97-218.13 0-113.35 79.34-156.55 129.03-172.5v388.62z" fill="#666666" p-id="4410"></path></svg></p>
            <p>早餐</p>
        </div>
    </div>
</div>
<div className="tody">
    <div className="bo" >
        <p ><svg t="1740454490846" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7470" width="200" height="200"><path d="M710.845279 290.500257c24.26566 0 45.345768-19.693528 45.345768-44.002167L756.191046 46.52871c0-24.308639-21.081131-44.023656-45.345768-44.023656-24.286126 0-43.958164 19.715017-43.958164 44.023656l0 199.969381C666.887115 270.806729 686.559153 290.500257 710.845279 290.500257zM623.079376 113.343441 400.514371 113.343441l0 66.468854 222.565005 0L623.079376 113.343441zM883.474988 113.343441l-82.717933 0 0 66.100464 85.881996 0c25.261337 0 46.579875 21.361517 46.579875 46.645366l0 153.823388L90.398358 379.912659l0-153.823388c0-25.282826 21.318538-46.645366 46.579875-46.645366l86.444814 0L223.423047 113.343441l-82.58695 0c-64.042595 0-116.428709 52.473095-116.428709 116.624161l0 676.342975c0 64.130599 50.457182 116.601648 114.499777 116.601648L883.474988 1022.912226c64.019059 0 116.427686-52.471049 116.427686-116.601648L999.902674 229.967602C999.902674 165.816536 947.493024 113.343441 883.474988 113.343441zM933.217902 909.73456c0 25.282826-21.318538 46.644343-46.579875 46.644343L136.978233 956.378903c-25.261337 0-46.579875-21.361517-46.579875-46.644343L90.398358 446.143083 933.217902 446.143083 933.217902 909.73456zM266.948353 645.744074c36.852326 0 66.707284-29.919427 66.707284-66.836221 0-36.897352-29.854958-66.815755-66.707284-66.815755-36.829813 0-66.707284 29.919427-66.707284 66.815755C200.241069 615.824647 230.117516 645.744074 266.948353 645.744074zM511.222799 645.744074c36.830837 0 66.707284-29.919427 66.707284-66.836221 0-36.897352-29.875424-66.815755-66.707284-66.815755-36.852326 0-66.707284 29.919427-66.707284 66.815755C444.515514 615.824647 474.370473 645.744074 511.222799 645.744074zM265.757225 890.1055c36.852326 0 66.706261-29.919427 66.706261-66.815755 0-36.917818-29.853935-66.837244-66.706261-66.837244-36.830837 0-66.707284 29.919427-66.707284 66.837244C199.04994 860.186074 228.925365 890.1055 265.757225 890.1055zM511.222799 890.1055c36.830837 0 66.707284-29.919427 66.707284-66.815755 0-36.917818-29.875424-66.837244-66.707284-66.837244-36.852326 0-66.707284 29.919427-66.707284 66.837244C444.515514 860.186074 474.370473 890.1055 511.222799 890.1055zM755.150344 645.744074c36.83186 0 66.708308-29.919427 66.708308-66.836221 0-36.897352-29.876448-66.815755-66.708308-66.815755-36.852326 0-66.707284 29.919427-66.707284 66.815755C688.444083 615.824647 718.298018 645.744074 755.150344 645.744074zM311.513338 290.500257c24.264637 0 45.345768-19.693528 45.345768-44.002167L356.859106 46.52871c0-24.308639-21.080108-44.023656-45.345768-44.023656-24.285103 0-43.959188 19.715017-43.959188 44.023656l0 199.969381C267.55415 270.806729 287.228235 290.500257 311.513338 290.500257z" fill="#272636" p-id="7471"></path></svg></p>
        <div className="zhu">
            <p>入住</p>
            <p>2月26日</p>
        </div>
        <span>-</span>
        <div className="zhu">
            <p>退房</p>
            <p>2月28日</p>
        </div>
        <p onClick={()=>navigate('/time')}><RightOutlined/></p>
    </div>
    <div className="dy">
    {
        shops.map((item,index)=>{
            return(
                <div key={item._id} className='dy1'>
                    <img src={item.img} alt="" />
                    <div className="y">
                        <p>{item.name}</p>
                        <p>{item.cm}m²|大床{item.bed}米|{item.win}</p>
                    </div>
                    <p style={{color:'red'}}>￥{item.price}</p>
                    <div className="bu" onClick={yu}>{item.state=='1'?'预定':'已预约'}</div>
                </div>
            )
        })
    }
    </div>
    
</div>
                </div>
        </div>
        </div>
    );
}
export default Tan